import React, { Component } from 'react';
import propTypes from 'prop-types'

class MainBanner extends Component {

  constructor(props) {
    //调用super保存props, 交给React进行托管, 在render中就可以使用了
    super(props);
    this.state = { }
  }
  
  render() {
    const { banners, title } = this.props
    return ( 
      <div>
        <h2>封装一个轮播图：{title}</h2>
        { banners.map(item => <li key={item.acm}>{item.title}</li>) }
      </div>
     );
  }

}

//对于传递给子组件的数据，有时候我们可能希望进行验证，特别是对于大型项目来说：
//当然，如果你的项目中默认继承了Flow或者Typescript，那么直接可以进行类型验证

//但是，即使我们没有使用Flow或者Typescript，也可以通过prop-types库来进行参数验证
MainBanner.propTypes = {
  banners: propTypes.array.isRequired,
  title: propTypes.string
}

MainBanner.defaultProps = {
  banners: [],
  title: '默认标题'
}
//如果没有用typescript，可以不进行类型校验
//如果用了typrscript，推荐使用类型校验!

export default MainBanner;